<template>
  <view class="category-page">
    <!-- 顶部一级分类 -->
    <view class="top-category-bar">
      <scroll-view class="category-scroll" scroll-x="true">
        <view class="category-list">
          <view 
            class="top-category-item" 
            :class="{ active: activeTopCategory === item.id }"
            v-for="item in topCategoryList" 
            :key="item.id"
            @click="selectTopCategory(item)"
          >
            <image class="category-icon" :src="item.icon" mode="aspectFill"></image>
            <text class="category-name">{{ item.name }}</text>
          </view>
        </view>
      </scroll-view>
      <!-- 全部按钮 - 固定在右侧 -->
      <view class="all-category-btn-fixed" @click="showAllCategories">
        <text class="all-text">全部</text>
        <text class="expand-icon">▼</text>
      </view>
    </view>

    <!-- 全部分类弹出层 -->
    <view class="category-overlay" v-if="showCategoryOverlay" @click="hideAllCategories">
      <view class="category-popup" @click.stop>
        <view class="popup-header">
          <text class="popup-title">全部分类</text>
        </view>
        <view class="category-grid">
          <view 
            class="grid-category-item" 
            :class="{ active: activeTopCategory === item.id }"
            v-for="item in topCategoryList" 
            :key="item.id"
            @click="selectCategoryFromPopup(item)"
          >
            <image class="grid-category-icon" :src="item.icon" mode="aspectFill"></image>
            <text class="grid-category-name">{{ item.name }}</text>
          </view>
        </view>
        <view class="popup-footer">
          <view class="collapse-btn" @click="hideAllCategories">
            <text class="collapse-text">点击收起</text>
            <text class="collapse-icon">▲</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 主体内容区域 -->
    <view class="main-content">
      <!-- 左侧二级分类 -->
      <view class="subcategory-sidebar">
        <view 
          class="subcategory-item" 
          :class="{ active: activeSubCategory === item.id }"
          v-for="item in currentSubCategories" 
          :key="item.id"
          @click="selectSubCategory(item)"
        >
          <text class="subcategory-name">{{ item.name }}</text>
          <view class="subcategory-tags">
            <view class="new-tag" v-if="isNewCategory(item)">新</view>
            <view class="hot-tag" v-if="isHotCategory(item)">爆</view>
          </view>
        </view>
      </view>

      <!-- 右侧商品列表 -->
      <view class="product-content">
        <!-- 筛选栏 -->
        <view class="filter-bar">
          <view class="filter-tabs">
            <view 
              class="filter-tab" 
              :class="{ active: activeFilter === 'all' }"
              @click="setFilter('all')"
            >
              <text class="tab-text">全部</text>
            </view>
            <view 
              class="filter-tab" 
              :class="{ active: activeFilter === 'sales' }"
              @click="setFilter('sales')"
            >
              <text class="tab-text">销量</text>
            </view>
            <view 
              class="filter-tab" 
              :class="{ active: activeFilter === 'price' }"
              @click="setFilter('price')"
            >
              <text class="tab-text">价格</text>
              <text class="price-arrow">{{ priceOrder === 'asc' ? '▲' : '▼' }}</text>
            </view>
          </view>
        </view>

        <!-- 商品列表 -->
        <scroll-view class="product-list" scroll-y="true">
          <!-- 加载状态 -->
          <view class="loading-container" v-if="isLoadingProducts">
            <view class="loading-spinner"></view>
            <text class="loading-text">商品加载中...</text>
          </view>
          
          <!-- 商品列表 -->
          <view v-else>
            <view 
              class="product-item" 
              :class="{ 'product-disabled': !isProductActive(item) }"
              v-for="(item, index) in filteredProductList" 
              :key="index"
              @click="onProductClick(item)"
            >
            <view class="product-image-wrapper">
                <image class="product-image" :src="getProductImage(item)" mode="aspectFill"></image>
                <view class="product-tag" :class="getProductTagClass(item)" v-if="getProductTag(item)">{{ getProductTag(item) }}</view>
                <!-- 缺货水印 -->
                <view class="out-of-stock-overlay" v-if="!isProductActive(item)">
                  <text class="out-of-stock-text">缺货</text>
                </view>
            </view>
            <view class="product-info">
                <text class="product-title">{{ item.name }}</text>
              <text class="product-desc">{{ item.description }}</text>
              <view class="product-meta">
                  <text class="delivery-info">{{ getDeliveryText(item.deliveryType) }}</text>
                  <text class="sales-info" v-if="getSalesText(item)">{{ getSalesText(item) }}</text>
              </view>
              <view class="product-bottom">
                  <text class="product-price">¥{{ getProductPrice(item) }}/{{ item.unit || '件' }}</text>
                  <view class="add-cart-btn" :class="{ 'disabled': !isProductActive(item) }">
                  <text class="cart-icon">🛒</text>
                </view>
              </view>
            </view>
          </view>
            
            <!-- 没有商品数据 -->
            <view class="no-data" v-if="!isLoadingProducts && filteredProductList.length === 0">
              <text class="no-data-text">暂无商品</text>
            </view>
          
          <!-- 没有更多商品 -->
            <view class="no-more" v-if="!isLoadingProducts && filteredProductList.length > 0">
            <text class="no-more-text">没有更多商品啦</text>
            </view>
          </view>
        </scroll-view>
      </view>
    </view>
  </view>
</template>

<script>
	import {
		post, get
	} from '@/utils/request';
	
export default {
  data() {
    return {
      activeTopCategory: null, // 当前选中的一级分类
      activeSubCategory: null, // 当前选中的二级分类
      activeFilter: 'all', // 当前选中的筛选条件
      priceOrder: 'desc', // 价格排序方向
      showCategoryOverlay: false, // 控制全部分类弹出层显示
      
      // 加载状态
      isLoadingProducts: false, // 商品加载状态
      
      // 生成状态标记
      isTagsGenerated: false, // 标记是否已经生成过标签
      isSalesGenerated: false, // 标记是否已经生成过销量
      isProductConfigGenerated: false, // 标记是否已经生成过商品配置
      
      // 存储生成的数据
      generatedSalesData: {}, // 存储生成的销量数据
      generatedProductConfig: {}, // 存储生成的商品配置
      
      // 从后端获取的分类数据
      topCategoryList: [],
      subCategoryData: {},
      
      // 商品数据（按二级分类ID存储）
      productData: {}
    }
  },

  computed: {
    // 当前二级分类列表
    currentSubCategories() {
      return this.subCategoryData[this.activeTopCategory] || []
    },

    // 当前商品列表
    currentProductList() {
      return this.productData[this.activeSubCategory] || []
    },

    // 筛选后的商品列表
    filteredProductList() {
      let list = [...this.currentProductList]
      
      switch (this.activeFilter) {
        case 'sales':
          // 按销量排序（使用预生成的销量数据）
          list.sort((a, b) => {
            const salesA = this.getGeneratedSalesCount(a.id);
            const salesB = this.getGeneratedSalesCount(b.id);
            return salesB - salesA; // 销量高的排在前面
          });
          break
        case 'price':
          // 按价格排序
          if (this.priceOrder === 'asc') {
            list.sort((a, b) => a.price - b.price)
          } else {
            list.sort((a, b) => b.price - a.price)
          }
          break
        default:
          // 全部，保持原有顺序
          break
      }
      
      return list
    }
  },

  onLoad(options) {
    // 重置所有生成状态，确保每次进入页面时重新生成
    this.isTagsGenerated = false;
    this.isSalesGenerated = false;
    this.isProductConfigGenerated = false;
    
    // 清空生成的数据
    this.generatedSalesData = {};
    this.generatedProductConfig = {};
    
    // 如果有传入分类参数，则设置对应的分类
    if (options.topCategory) {
      this.activeTopCategory = options.topCategory
    }
    if (options.subCategory) {
      this.activeSubCategory = options.subCategory
    }
    
    // 初始化数据
    this.initData()
  },

  onShow() {
    // 每次显示页面时也重置生成状态
    if (!this.isTagsGenerated || !this.isSalesGenerated || !this.isProductConfigGenerated) {
      this.isTagsGenerated = false;
      this.isSalesGenerated = false;
      this.isProductConfigGenerated = false;
      
      // 清空生成的数据
      this.generatedSalesData = {};
      this.generatedProductConfig = {};
      
      // 如果分类数据已经存在，重新生成
      if (Object.keys(this.subCategoryData).length > 0) {
        this.generateTagsForExistingData();
        this.generateSalesForExistingData();
        this.generateProductConfigForExistingData();
      }
    }
  },

  methods: {
    // 初始化数据
    async initData() {
      try {
        // 获取分类数据
        await this.loadCategoryData()
        // 获取商品数据
        await this.loadProductData()
      } catch (error) {
        console.error('初始化数据失败:', error)
        // 使用默认数据
        this.useDefaultData()
      }
    },

    // 加载分类数据
    async loadCategoryData() {
      try {
        // 获取所有分类数据（不分页）
        const res = await get('/transaction/category/list', {
          pageNum: 1,
          pageSize: 1000 // 设置一个较大的值来获取所有数据
        });
        
        console.log('分类数据响应:', res);
        
        if (res.rows && res.rows.length > 0) {
          // 处理分类数据
          this.processCategoryData(res.rows);
        }
      } catch (error) {
        console.error('加载分类数据失败:', error);
      }
    },

    // 处理分类数据，分离一级和二级分类
    processCategoryData(categories) {
      const topCategories = [];
      const subCategories = {};
      
      categories.forEach(category => {
        if (category.delFlag === '0') { // 只处理未删除的分类
          if (category.parentId === null) {
            // 一级分类
            topCategories.push({
              id: category.id,
              name: category.name,
              icon: category.imageUrl || '/static/swy/p0.jpg' // 使用默认图片
            });
          } else {
            // 二级分类
            const parentId = category.parentId;
            if (!subCategories[parentId]) {
              subCategories[parentId] = [];
            }
            subCategories[parentId].push({
              id: category.id,
              name: category.name,
              isNew: false,
              isHot: false
            });
          }
        }
      });
      
      // 只在第一次生成标签
      if (!this.isTagsGenerated) {
        // 为每个一级分类的二级分类设置标签
        Object.keys(subCategories).forEach(parentId => {
          const subList = subCategories[parentId];
          if (subList.length > 0) {
            // 第一个设置为热销
            subList[0].isHot = true;
            
            // 随机设置新品标签，概率为20%
            subList.forEach((sub, index) => {
              if (index > 0) { // 跳过第一个（已经是热销）
                sub.isNew = Math.random() < 0.2; // 20%概率
              }
            });
          }
        });
        
        // 标记已经生成过标签
        this.isTagsGenerated = true;
        
        console.log('标签生成完成，标记为已生成');
      }
      
      // 更新数据
      this.topCategoryList = topCategories;
      this.subCategoryData = subCategories;
      
      // 如果没有选中的分类，默认选择第一个
      if (!this.activeTopCategory && topCategories.length > 0) {
        this.activeTopCategory = topCategories[0].id;
        
        // 选择第一个二级分类
        const firstSubCategories = subCategories[this.activeTopCategory];
        if (firstSubCategories && firstSubCategories.length > 0) {
          this.activeSubCategory = firstSubCategories[0].id;
        }
      }
      
      console.log('处理后的分类数据:', {
        topCategories: this.topCategoryList,
        subCategories: this.subCategoryData
      });
    },

    // 加载商品数据
    async loadProductData() {
      if (!this.activeSubCategory) {
        console.warn('未选择二级分类，无法加载商品数据');
        return;
      }
      
      try {
        this.isLoadingProducts = true; // 开始加载
        
        // 1. 获取 spu 列表
        const spuRes = await get('/transaction/spu/list', {
          categoryId: this.activeSubCategory,
          pageNum: 1,
          pageSize: 100
        });
    
        console.log(`二级分类 ${this.activeSubCategory} 的商品数据:`, spuRes);
    
        if (spuRes.rows && spuRes.rows.length > 0) {
          // 为当前二级分类生成统一的标签和配送信息
          const categoryConfig = this.generateCategoryConfig(this.activeSubCategory);
          
          // 2. 遍历 spu 数据，顺便获取 sku 数据
          const processedProducts = await Promise.all(
            spuRes.rows.map(async spu => {
              try {
                const skuRes = await get('/transaction/sku/list', {
                  pageNum: 1,
                  pageSize: 50,
                  spuId: spu.id
                });
        
                // 取最低价格和规格信息
                let minPrice = 0;
                let minPriceSku = null;
                let skuList = [];
                
                if (skuRes && skuRes.rows && skuRes.rows.length > 0) {
                  // 过滤出上架的SKU
                  const activeSkus = skuRes.rows.filter(sku => sku.isActive === '1' && sku.delFlag === '0');
                  
                  if (activeSkus.length > 0) {
                    skuList = activeSkus.map(sku => ({
                      id: sku.id,
                      spec: sku.spec ? JSON.parse(sku.spec) : {},
                      price: sku.price,
                      imageUrl: sku.imageUrl
                    }));
                    
                    // 找到最低价格的SKU
                    minPriceSku = activeSkus.reduce((min, sku) => 
                      sku.price < min.price ? sku : min
                    );
                    minPrice = minPriceSku.price;
                  }
                }
        
                return {
                  id: spu.id,
                  name: spu.name,
                  brandName: spu.brandName,
                  unit: spu.unit,
                  description: spu.description,
                  imageUrls: spu.imageUrls,
                  isActive: spu.isActive === '1', // 转换为布尔值
                  categoryId: spu.categoryId,
                  categoryName: spu.categoryName,
                  price: minPrice,
                  spec: minPriceSku ? JSON.parse(minPriceSku.spec) : null, // 最低价格SKU的规格
                  skuList, // 所有 SKU 数据
                  // 添加统一的标签和配送信息
                  marketing_tag: categoryConfig.marketing_tag,
                  deliveryType: categoryConfig.deliveryType
                };
              } catch (error) {
                console.error(`获取商品 ${spu.id} 的SKU数据失败:`, error);
                return {
                  id: spu.id,
                  name: spu.name,
                  brandName: spu.brandName,
                  unit: spu.unit,
                  description: spu.description,
                  imageUrls: spu.imageUrls,
                  isActive: spu.isActive === '1',
                  categoryId: spu.categoryId,
                  categoryName: spu.categoryName,
                  price: 0,
                  spec: null,
                  skuList: [],
                  // 添加统一的标签和配送信息
                  marketing_tag: categoryConfig.marketing_tag,
                  deliveryType: categoryConfig.deliveryType
                };
              }
            })
          );
      
          this.productData[this.activeSubCategory] = processedProducts;
          
          // 立即生成销量数据
          this.generateSalesData();
        } else {
          this.productData[this.activeSubCategory] = [];
        }
      } catch (error) {
        console.error('加载商品数据失败:', error);
        this.productData[this.activeSubCategory] = [];
      } finally {
        this.isLoadingProducts = false; // 结束加载
      }
    },

    // 为二级分类生成统一的配置
    generateCategoryConfig(categoryId) {
      // 如果已经生成过配置，直接返回
      if (this.isProductConfigGenerated && this.generatedProductConfig[categoryId]) {
        return this.generatedProductConfig[categoryId];
      }
      
      // 如果还没有生成过配置，先生成所有配置
      if (!this.isProductConfigGenerated) {
        this.generateAllProductConfigs();
      }
      
      // 返回对应分类的配置
      return this.generatedProductConfig[categoryId] || { 
        marketing_tag: Math.floor(Math.random() * 10) + 1, // 随机标签
        deliveryType: Math.floor(Math.random() * 4) + 1 // 随机配送类型（1-4）
      };
    },

    // 生成所有商品配置
    generateAllProductConfigs() {
      if (this.isProductConfigGenerated) {
        return; // 如果已经生成过，直接返回
      }
      
      // 根据二级分类ID生成固定的配置
      const configs = {
        // 示例配置，你可以根据实际的二级分类ID来设置
        'new-fruits': { marketing_tag: 2, deliveryType: 2 }, // 新果上市 - 新品，明日达
        'coconut': { marketing_tag: 9, deliveryType: 2 }, // 椰青/热带果 - 冷冻，明日达
        'vegetables': { marketing_tag: 7, deliveryType: 2 }, // 蔬菜 - 推荐，明日达
        'flowers': { marketing_tag: 1, deliveryType: 3 }, // 鲜花 - 热销，隔日达
        'flower-tea': { marketing_tag: 4, deliveryType: 2 }, // 花茶 - 进口，明日达
        'milk': { marketing_tag: 9, deliveryType: 2 }, // 牛奶 - 冷冻，明日达
        'yogurt': { marketing_tag: 2, deliveryType: 2 }, // 酸奶 - 新品，明日达
        'bread': { marketing_tag: 7, deliveryType: 1 }, // 面包 - 推荐，仅支持自提
        'rice': { marketing_tag: 10, deliveryType: 2 }, // 大米 - 自营，明日达
        'oil': { marketing_tag: 10, deliveryType: 2 }, // 食用油 - 自营，明日达
        'pork': { marketing_tag: 9, deliveryType: 2 }, // 猪肉 - 冷冻，明日达
        'beef': { marketing_tag: 1, deliveryType: 2 }, // 牛肉 - 热销，明日达
        'fish': { marketing_tag: 9, deliveryType: 2 }, // 鱼类 - 冷冻，明日达
        'shrimp': { marketing_tag: 9, deliveryType: 2 }, // 虾类 - 冷冻，明日达
        'tissues': { marketing_tag: 10, deliveryType: 2 }, // 面纸巾 - 自营，明日达
        'toilet-paper': { marketing_tag: 5, deliveryType: 2 }, // 卫生纸 - 周年庆，明日达
        'gift-boxes': { marketing_tag: 3, deliveryType: 3 }, // 礼盒 - 礼盒，隔日达
        'personalized': { marketing_tag: 6, deliveryType: 5 }, // 个性化定制 - 限时，3-5日达
      };
      
      // 为所有可能的二级分类生成配置
      Object.keys(configs).forEach(categoryId => {
        this.generatedProductConfig[categoryId] = configs[categoryId];
      });
      
      // 为其他可能的分类生成随机配置
      const allCategoryIds = Object.keys(this.subCategoryData).flatMap(parentId => 
        this.subCategoryData[parentId].map(sub => sub.id)
      );
      
      allCategoryIds.forEach(categoryId => {
        if (!this.generatedProductConfig[categoryId]) {
          this.generatedProductConfig[categoryId] = {
            marketing_tag: Math.floor(Math.random() * 10) + 1, // 随机标签
            deliveryType: Math.floor(Math.random() * 4) + 1 // 随机配送类型（1-4）
          };
        }
      });
      
      this.isProductConfigGenerated = true;
      console.log('商品配置生成完成');
    },

    // 为已存在的分类数据生成商品配置
    generateProductConfigForExistingData() {
      if (this.isProductConfigGenerated) {
        return;
      }
      
      this.generateAllProductConfigs();
      console.log('为已存在的分类数据生成商品配置完成');
    },

    // 使用默认数据
    useDefaultData() {
      console.log('使用默认数据')
      // 这里可以设置一些默认的分类和商品数据用于测试
    },

    // 判断是否为新分类
    isNewCategory(category) {
      return category.isNew === true
    },

    // 判断是否为热销分类
    isHotCategory(category) {
      return category.isHot === true
    },

    // 获取商品图片（取第一张）
    getProductImage(product) {
      if (product.imageUrls) {
        const images = product.imageUrls.split(',')
        return images[0] || '/static/images/default-product.png'
      }
      return '/static/images/default-product.png'
    },

    // 获取商品标签
    getProductTag(product) {
      if (product.marketing_tag) {
        return this.getTagText(product.marketing_tag)
      }
      return null
    },

    // 获取商品标签样式类
    getProductTagClass(product) {
      if (product.marketing_tag) {
        const tagMap = {
          1: 'tag-hot', // 热销 - 红色
          2: 'tag-new', // 新品 - 蓝色
          3: 'tag-gift', // 礼盒 - 紫色
          4: 'tag-import', // 进口 - 橙色
          5: 'tag-anniversary', // 周年庆 - 红色
          6: 'tag-limited', // 限时 - 黄色
          7: 'tag-recommend', // 推荐 - 绿色
          8: 'tag-special', // 特价 - 红色
          9: 'tag-frozen', // 冷冻 - 蓝色
          10: 'tag-self' // 自营 - 绿色
        }
        return tagMap[product.marketing_tag] || 'tag-default'
      }
      return null
    },

    // 标签文本映射
    getTagText(tagCode) {
      const tagMap = {
        1: '热销',
        2: '新品',
        3: '礼盒',
        4: '进口',
        5: '周年庆',
        6: '限时',
        7: '推荐',
        8: '特价',
        9: '冷冻',
        10: '自营'
      }
      return tagMap[tagCode] || null
    },

    // 获取商品价格
    getProductPrice(product) {
      return product.price || 0;
    },

    // 获取商品规格（格式化显示）
    getProductSpec(product) {
      if (product.spec && typeof product.spec === 'object') {
        const specArray = [];
        for (const [key, value] of Object.entries(product.spec)) {
          specArray.push(`${key}:${value}`);
        }
        return specArray.join(' ');
      }
      return null;
    },

    // 获取配送文案
    getDeliveryText(deliveryType) {
      const deliveryMap = {
        1: '仅支持自提',
        2: '明日达',
        3: '隔日达',
        4: '当日达'
      }
      return deliveryMap[deliveryType] || '明日达'
    },

    // 获取销量文案（预留接口，目前用随机数）
    getSalesText(product) {
      // TODO: 后续从后端获取真实销量数据
      if (product.sales_count) {
        return this.formatSalesCount(product.sales_count);
      }
      
      // 使用预生成的销量数据
      const salesCount = this.getGeneratedSalesCount(product.id);
      return this.formatSalesCount(salesCount);
    },

    // 获取生成的销量数据
    getGeneratedSalesCount(productId) {
      // 如果还没有生成过销量数据，先生成
      if (!this.isSalesGenerated) {
        this.generateSalesData();
      }
      
      // 返回对应商品的销量，如果没有则生成一个默认值
      if (!this.generatedSalesData[productId]) {
        const salesCount = Math.floor(Math.random() * 200) + 1;
        this.generatedSalesData[productId] = salesCount;
        console.log(`为商品 ${productId} 生成默认销量: ${salesCount}`);
      }
      
      return this.generatedSalesData[productId];
    },

    // 生成销量数据
    generateSalesData() {
      if (this.isSalesGenerated) {
        return; // 如果已经生成过，直接返回
      }
      
      // 为所有商品生成销量数据（控制在200以内）
      Object.keys(this.productData).forEach(categoryId => {
        const products = this.productData[categoryId];
        products.forEach(product => {
          // 为每个商品生成1-200之间的独立随机销量
          const salesCount = Math.floor(Math.random() * 200) + 1;
          this.generatedSalesData[product.id] = salesCount;
        });
      });
      
      this.isSalesGenerated = true;
      console.log('销量数据生成完成:', this.generatedSalesData);
    },

    // 为已存在的商品数据生成销量
    generateSalesForExistingData() {
      if (this.isSalesGenerated) {
        return;
      }
      
      Object.keys(this.productData).forEach(categoryId => {
        const products = this.productData[categoryId];
        products.forEach(product => {
          // 为每个商品生成1-200之间的独立随机销量
          const salesCount = Math.floor(Math.random() * 200) + 1;
          this.generatedSalesData[product.id] = salesCount;
        });
      });
      
      this.isSalesGenerated = true;
      console.log('为已存在的商品数据生成销量完成:', this.generatedSalesData);
    },

    // 判断商品是否激活
    isProductActive(product) {
      return product.isActive === true;
    },

    // 商品点击事件
    onProductClick(product) {
      if (this.isProductActive(product)) {
        // 跳转到商品详情页
        uni.navigateTo({
          url: `/pages/product-detail/index?id=${product.id}`
        });
      } else {
        uni.showToast({
          title: '商品已下架',
          icon: 'none'
        });
      }
    },

    // 选择一级分类
    selectTopCategory(category) {
      this.activeTopCategory = category.id
      // 自动选择第一个二级分类
      const subCategories = this.subCategoryData[category.id]
      if (subCategories && subCategories.length > 0) {
        this.activeSubCategory = subCategories[0].id
      } else {
        this.activeSubCategory = null
      }
      console.log('选择一级分类:', category.name)
      
      // 重新加载商品数据
      this.loadProductData()
    },

    // 选择二级分类
    selectSubCategory(category) {
      this.activeSubCategory = category.id
      console.log('选择二级分类:', category.name)
      
      // 重新加载商品数据
      this.loadProductData()
    },

    // 设置筛选条件
    setFilter(filter) {
      if (filter === 'price') {
        // 价格筛选：切换排序方向
        if (this.activeFilter === 'price') {
          this.priceOrder = this.priceOrder === 'asc' ? 'desc' : 'asc'
        } else {
          this.priceOrder = 'desc'
        }
      }
      
      this.activeFilter = filter
      console.log('设置筛选条件:', filter, '价格排序:', this.priceOrder)
    },

    // 显示全部分类弹出层
    showAllCategories() {
      this.showCategoryOverlay = true
      console.log('显示全部分类')
    },

    // 隐藏全部分类弹出层
    hideAllCategories() {
      this.showCategoryOverlay = false
      console.log('隐藏全部分类')
    },

    // 从弹出层选择分类
    selectCategoryFromPopup(category) {
      this.selectTopCategory(category)
      this.hideAllCategories()
    },

    // 为已存在的分类数据生成标签
    generateTagsForExistingData() {
      if (this.isTagsGenerated) {
        return; // 如果已经生成过，直接返回
      }
      
      // 为每个一级分类的二级分类设置标签
      Object.keys(this.subCategoryData).forEach(parentId => {
        const subList = this.subCategoryData[parentId];
        if (subList.length > 0) {
          // 第一个设置为热销
          subList[0].isHot = true;
          
          // 随机设置新品标签，概率为20%
          subList.forEach((sub, index) => {
            if (index > 0) { // 跳过第一个（已经是热销）
              sub.isNew = Math.random() < 0.2; // 20%概率
            }
          });
        }
      });
      
      // 标记已经生成过标签
      this.isTagsGenerated = true;
      
      console.log('为已存在的分类数据生成标签完成');
    },

    // 格式化销量显示
    formatSalesCount(count) {
      if (count < 10) {
        return `月${count}人已下单`;
      } else if (count < 20) {
        return `月10+人已下单`;
      } else if (count < 50) {
        return `月20+人已下单`;
      } else if (count < 100) {
        return `月50+人已下单`;
      } else if (count < 150) {
        return `月100+人已下单`;
      } else {
        return `月150+人已下单`;
      }
    }
  }
}
</script>

<style scoped>
.category-page {
  height: 100vh;
  background-color: #f8f8f8;
  display: flex;
  flex-direction: column;
}

/* 顶部一级分类 */
.top-category-bar {
  background-color: #fff;
  border-bottom: 1rpx solid #f0f0f0;
  padding: 20rpx 0;
  position: relative;
}

.category-scroll {
  white-space: nowrap;
  padding-right: 120rpx; /* 为固定按钮留出空间 */
}

.category-list {
  display: flex;
  padding: 0 20rpx;
}

.top-category-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 40rpx;
  min-width: 120rpx;
  transition: all 0.3s ease;
}

.top-category-item.active {
  color: #1BBC9B;
}

.category-icon {
  width: 80rpx;
  height: 80rpx;
  border-radius: 40rpx;
  margin-bottom: 10rpx;
}

.category-name {
  font-size: 24rpx;
  color: #333;
  text-align: center;
}

.top-category-item.active .category-name {
  color: #1BBC9B;
  font-weight: bold;
}

/* 全部按钮 - 固定在右侧 */
.all-category-btn-fixed {
  position: absolute;
  right: 20rpx;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 80rpx;
  transition: all 0.3s ease;
  padding: 15rpx 10rpx;
  border-radius: 20rpx;
  background-color: #f8f8f8;
  z-index: 10;
}

.all-category-btn-fixed:active {
  background-color: #e8e8e8;
}

.all-text {
  font-size: 24rpx;
  color: #333;
  text-align: center;
  margin-bottom: 5rpx;
}

.expand-icon {
  font-size: 20rpx;
  color: #666;
}

/* 全部分类弹出层 */
.category-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 200rpx;
}

.category-popup {
  background-color: #fff;
  border-radius: 20rpx;
  width: 90%;
  max-height: 70vh;
  overflow: hidden;
  box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.3);
}

.popup-header {
  padding: 30rpx;
  border-bottom: 1rpx solid #f0f0f0;
  text-align: center;
}

.popup-title {
  font-size: 32rpx;
  color: #333;
  font-weight: bold;
}

.category-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30rpx;
  padding: 30rpx;
  max-height: 50vh;
  overflow-y: auto;
}

.grid-category-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20rpx 10rpx;
  border-radius: 15rpx;
  transition: all 0.3s ease;
}

.grid-category-item.active {
  background-color: #f0fdfa;
}

.grid-category-item:active {
  background-color: #f0f0f0;
}

.grid-category-icon {
  width: 80rpx;
  height: 80rpx;
  border-radius: 40rpx;
  margin-bottom: 15rpx;
}

.grid-category-name {
  font-size: 24rpx;
  color: #333;
  text-align: center;
  line-height: 1.2;
}

.grid-category-item.active .grid-category-name {
  color: #1BBC9B;
  font-weight: bold;
}

.popup-footer {
  padding: 20rpx;
  border-top: 1rpx solid #f0f0f0;
  text-align: center;
}

.collapse-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15rpx 30rpx;
  background-color: #f8f8f8;
  border-radius: 25rpx;
  transition: all 0.3s ease;
}

.collapse-btn:active {
  background-color: #e8e8e8;
}

.collapse-text {
  font-size: 28rpx;
  color: #666;
  margin-right: 10rpx;
}

.collapse-icon {
  font-size: 20rpx;
  color: #666;
}

/* 主体内容区域 */
.main-content {
  flex: 1;
  display: flex;
  overflow: hidden;
}

/* 左侧二级分类 */
.subcategory-sidebar {
  width: 200rpx;
  background-color: #fff;
  border-right: 1rpx solid #f0f0f0;
  overflow-y: auto;
}

.subcategory-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30rpx 20rpx;
  border-bottom: 1rpx solid #f8f8f8;
  transition: all 0.3s ease;
  position: relative;
}

.subcategory-item.active {
  background-color: #f0fdfa;
  border-left: 6rpx solid #1BBC9B;
}

.subcategory-item:active {
  background-color: #f0f0f0;
}

.subcategory-name {
  font-size: 28rpx;
  color: #333;
  flex: 1;
}

.subcategory-item.active .subcategory-name {
  color: #1BBC9B;
  font-weight: bold;
}

.subcategory-tags {
  display: flex;
  gap: 8rpx;
}

.new-tag, .hot-tag {
  background-color: #ff4757;
  color: #fff;
  font-size: 20rpx;
  padding: 4rpx 8rpx;
  border-radius: 8rpx;
}

.hot-tag {
  background-color: #1BBC9B;
}

/* 右侧商品列表 */
.product-content {
  flex: 1;
  background-color: #fff;
  display: flex;
  flex-direction: column;
}

/* 筛选栏 */
.filter-bar {
  padding: 20rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.filter-tabs {
  display: flex;
  gap: 40rpx;
}

.filter-tab {
  display: flex;
  align-items: center;
  padding: 10rpx 0;
  transition: all 0.3s ease;
}

.filter-tab.active {
  color: #1BBC9B;
}

.tab-text {
  font-size: 28rpx;
  color: #333;
}

.filter-tab.active .tab-text {
  color: #1BBC9B;
  font-weight: bold;
}

.price-arrow {
  font-size: 20rpx;
  color: #999;
  margin-left: 8rpx;
}

.filter-tab.active .price-arrow {
  color: #1BBC9B;
}

/* 商品列表 */
.product-list {
  flex: 1;
  padding: 20rpx;
}

.product-item {
  display: flex;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #f8f8f8;
}

.product-item.product-disabled {
  opacity: 0.7;
  pointer-events: none; /* 禁用点击 */
}

.product-image-wrapper {
  position: relative;
  margin-right: 20rpx;
}

.product-image {
  width: 160rpx;
  height: 160rpx;
  border-radius: 8rpx;
}

.product-tag {
  position: absolute;
  top: 0;
  left: 0;
  color: #fff;
  font-size: 20rpx;
  padding: 4rpx 8rpx;
  border-radius: 4rpx;
}

/* 商品标签样式 */
.tag-hot, .tag-anniversary, .tag-special {
  background-color: #ff4757; /* 红色 */
}

.tag-new, .tag-frozen {
  background-color: #1e90ff; /* 蓝色 */
}

.tag-gift {
  background-color: #9370db; /* 紫色 */
}

.tag-import {
  background-color: #ff8c00; /* 橙色 */
}

.tag-anniversary {
  background-color: #ff4757; /* 红色 */
}

.tag-limited {
  background-color: #ffd700; /* 黄色 */
  color: #333;
}

.tag-recommend, .tag-self {
  background-color: #32cd32; /* 绿色 */
}

.tag-default {
  background-color: #666; /* 默认灰色 */
}

.out-of-stock-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 8rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.out-of-stock-text {
  font-size: 36rpx;
  color: #ff4757;
  font-weight: bold;
  transform: rotate(-15deg);
  background-color: rgba(255, 71, 87, 0.1);
  padding: 10rpx 20rpx;
  border-radius: 8rpx;
  border: 2rpx solid #ff4757;
}

.product-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.product-title {
  font-size: 28rpx;
  color: #333;
  line-height: 1.4;
  margin-bottom: 10rpx;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.product-desc {
  font-size: 24rpx;
  color: #666;
  margin-bottom: 10rpx;
}

.product-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15rpx;
}

.delivery-info {
  font-size: 22rpx;
  color: #1BBC9B;
  background-color: rgba(27, 188, 155, 0.1);
  padding: 4rpx 8rpx;
  border-radius: 4rpx;
  border: 1rpx solid rgba(27, 188, 155, 0.3);
}

.product-spec {
  font-size: 22rpx;
  color: #999;
  margin-right: 80rpx; /* 新增此行，使销量信息向左移动 */
}

.sales-info {
  font-size: 22rpx;
  color: #999;
  margin-right: 80rpx; /* 新增此行，使销量信息向左移动 */
}

.product-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20rpx;
}

.product-price {
  font-size: 32rpx;
  color: #1BBC9B;
  font-weight: bold;
  flex: 1;
}

.add-cart-btn {
  width: 60rpx;
  height: 60rpx;
  background-color: #1BBC9B;
  border-radius: 30rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  flex-shrink: 0;
  margin-right: 70rpx; /* 新增此行，使按钮向左移动 */
}

.add-cart-btn.disabled {
  background-color: #ccc;
  opacity: 0.7;
  pointer-events: none; /* 禁用点击 */
}

.add-cart-btn:active {
  transform: scale(0.9);
}

.cart-icon {
  font-size: 28rpx;
  color: #fff;
}

/* 加载状态 */
.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40rpx 0;
}

.loading-spinner {
  width: 60rpx;
  height: 60rpx;
  border: 6rpx solid #f3f3f3;
  border-top: 6rpx solid #1BBC9B;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 20rpx;
}

.loading-text {
  font-size: 28rpx;
  color: #999;
}

/* 没有商品数据 */
.no-data {
  text-align: center;
  padding: 40rpx 0;
}

.no-data-text {
  font-size: 24rpx;
  color: #999;
}

/* 没有更多商品 */
.no-more {
  text-align: center;
  padding: 40rpx 0;
}

.no-more-text {
  font-size: 24rpx;
  color: #999;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>